<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M512 330.666667a181.333333 181.333333 0 1 0 181.333333 181.333333 181.333333 181.333333 0 0 0-181.333333-181.333333z m0 298.666666a117.333333 117.333333 0 1 1 117.333333-117.333333 117.546667 117.546667 0 0 1-117.333333 117.333333z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(153,153,153)'}' /%3E%3Cpath d='M942.933333 576l-38.613333-21.333333a385.706667 385.706667 0 0 0 0-83.626667l38.613333-21.333333a74.666667 74.666667 0 0 0 27.306667-101.973334l-85.333333-147.84A74.666667 74.666667 0 0 0 782.933333 170.666667l-39.04 22.613333a394.24 394.24 0 0 0-71.893333-42.666667V106.666667A74.666667 74.666667 0 0 0 597.333333 32h-170.666666A74.666667 74.666667 0 0 0 352 106.666667v44.8a394.24 394.24 0 0 0-71.893333 42.666666L241.066667 170.666667a74.666667 74.666667 0 0 0-102.186667 27.52l-85.333333 147.84A74.666667 74.666667 0 0 0 81.066667 448l38.613333 21.333333a385.493333 385.493333 0 0 0 0 83.626667L81.066667 576a74.666667 74.666667 0 0 0-27.306667 101.973333l85.333333 147.84A74.666667 74.666667 0 0 0 241.066667 853.333333l39.04-22.613333a394.24 394.24 0 0 0 71.893333 42.666667V917.333333a74.666667 74.666667 0 0 0 74.666667 74.666667h170.666666a74.666667 74.666667 0 0 0 74.666667-74.666667v-44.8a394.24 394.24 0 0 0 71.893333-42.666666l39.253334 23.466666a74.666667 74.666667 0 0 0 101.973333-27.306666l85.333333-147.84A74.666667 74.666667 0 0 0 942.933333 576z m-28.16 69.973333l-85.333333 147.84a10.666667 10.666667 0 0 1-14.506667 3.84l-19.84-11.52-31.573333-18.133333a42.666667 42.666667 0 0 0-46.933333 2.986667 334.293333 334.293333 0 0 1-33.92 23.466666c-4.053333 2.346667-7.893333 5.12-11.946667 7.253334a328.106667 328.106667 0 0 1-36.906667 17.493333 42.666667 42.666667 0 0 0-26.026666 39.253333V917.333333a10.666667 10.666667 0 0 1-10.666667 10.666667H426.666667a10.666667 10.666667 0 0 1-10.666667-10.666667v-58.88a42.666667 42.666667 0 0 0-26.026667-39.253333 328.106667 328.106667 0 0 1-36.906666-17.493333c-4.053333-2.346667-7.893333-4.906667-11.946667-7.253334a334.293333 334.293333 0 0 1-33.493333-23.253333 42.666667 42.666667 0 0 0-46.933334-2.986667l-31.573333 18.133334-19.84 11.52a10.666667 10.666667 0 0 1-14.506667-3.84l-85.333333-147.84a10.666667 10.666667 0 0 1 3.84-14.506667l19.84-11.306667 31.36-18.133333a42.666667 42.666667 0 0 0 21.333333-42.666667 330.026667 330.026667 0 0 1-3.2-39.68v-7.04-6.613333a329.386667 329.386667 0 0 1 3.2-39.893333 42.666667 42.666667 0 0 0-21.333333-42.666667l-31.36-18.133333-20.053333-13.013334a10.666667 10.666667 0 0 1-3.84-14.506666l85.333333-147.84a10.666667 10.666667 0 0 1 6.4-4.906667 10.88 10.88 0 0 1 8.106667 0l19.84 11.52 31.573333 18.133333a42.666667 42.666667 0 0 0 46.933333-2.986666A334.293333 334.293333 0 0 1 341.333333 229.546667c4.053333-2.346667 7.893333-5.12 11.946667-7.253334a328.106667 328.106667 0 0 1 36.906667-17.493333 42.666667 42.666667 0 0 0 25.813333-39.253333V106.666667a10.666667 10.666667 0 0 1 10.666667-10.666667h170.666666a10.666667 10.666667 0 0 1 10.666667 10.666667v58.88a42.666667 42.666667 0 0 0 26.026667 39.253333 328.106667 328.106667 0 0 1 36.906666 17.493333c4.053333 2.346667 7.893333 4.906667 11.946667 7.253334a334.293333 334.293333 0 0 1 33.493333 23.253333 42.666667 42.666667 0 0 0 46.933334 2.986667l31.573333-18.133334 19.84-11.52a10.453333 10.453333 0 0 1 5.333333-1.493333 10.666667 10.666667 0 0 1 9.173334 5.333333l85.333333 147.84a10.666667 10.666667 0 0 1-3.84 14.506667l-19.84 11.52-31.36 18.133333a42.666667 42.666667 0 0 0-21.333333 42.666667 329.386667 329.386667 0 0 1 3.2 39.893333v13.653334a329.813333 329.813333 0 0 1-3.2 39.68 42.666667 42.666667 0 0 0 21.333333 42.666666l31.36 18.133334 19.84 11.52a10.666667 10.666667 0 0 1 3.84 14.506666z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(153,153,153)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
